<template>
  <global-crop ref="cropRef"></global-crop>
  <!-- <el-button @click="handleUpload"></el-button> -->

  <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    multiple
    :before-upload="beforeUpload"
  >
    <el-button type="primary">Click to upload</el-button>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500KB.
      </div>
    </template>
  </el-upload>

  <el-button type="primary" @click="clickDialog">Click to dialog</el-button>
  <div>{{ timer }}</div>

  <identity :identifyCode="identifyCode"></identity>
</template>

<script setup>
  import GlobalCrop from '@/components/GlobalCrop/index.vue'
  import jsxDialogVue from '../componets/jsxDialog.vue'
  import identity from '@/components/Identify'
  import { ref } from 'vue'
  import { useDateHubs } from '@/hooks/web/useDateHub'
  import common from '@/utils/common'
  const fileList = ref([])
  const beforeUpload = function (file) {
    handleUpload(file)
    return false
  }
  const cropRef = ref()
  const handleUpload = (file) => {
    console.log(file)
    cropRef.value.initCropInfo(file)
  }

  const clickDialog = () => {
    console.log('file')
  }

  const { generateCountDownString } = useDateHubs()
  const timer = generateCountDownString(null, '2021-08-22 13:00:10')
  console.log('timer.value =' + timer.value)

  const identifyCode = ref(common.randomWord(4))
  console.log('identifyCode =' + JSON.stringify(identifyCode.value))
</script>
